<template>
	<div id="hy-swiper">
		<div class="swiper">
			<slot></slot>
		</div>
		<!-- <slot name="indicator"></slot>
		<div class="indicator">
			<slot name="indicator" v-if="showIndeicator && slideCount>1">
				<div v-for="(index, item) in slideCount" class="indi-item" 
						 :class="{active: index === currentIndex-1}" :key="index">
				</div>
			</slot>
		</div> -->
	</div>
</template>

<script>
	export default{
		name:'Swiper',
		// showIndeicator:{
		// 	type:Boolean,
		// 	default:true
		// },
		data(){
			return{
				slideCount: 0, //元素个数
				// totalWidth:0,
				// currentIndex:1,
			
			}
		},
  // mounted: function () {
		// 	//1.操作DPM,在前后添加Slide
		// 	setTimeout(() => {
		// 		this.handleDom();
		// 		// 2.开启定时器
		// 		this.startTimer();
		// 	},100)
		// },
		methods:{
		// 	/**
		// 	 * 定时器操作
		// 	 */
		// 	startTimer: function(){
		// 		this.playTimer = window.setInterval(() => {
		// 			this.currentIndex++;
		// 			this.scrollContent(-this.currentIndex * this.totalWidth);
		// 		}, this.setInterval)
		// 	},
		// 	stopTimer: function(){
		// 		window.clearInterval(this.playTimer);
		// 	}
		 }
	}
</script>

<style scoped>
	#hy-swiper{
		overflow: hidden;
		position: relative;
	}
	.swiper{
		display: flex;
	}
	.indicator{
		display: flex;
		justify-content: center;
		position: absolute;
		width: 100%;
		bottom: 8px;
		height: 30px;
	}
	.indi-item{
		box-sizing: border-box;
		width: 8px;
		height: 8px;
		background-color: #fff;
		border-radius: 4px;
		line-height: 8px;
		text-align: center;
		font-size: 12px;
		margin:  0 5px;
	}
</style>
